<template>
  <el-form v-show="showSkuAdd" label-width="100px">
    <el-form-item label="SPU 名称">
      <span>{{spuName}}</span>
    </el-form-item>

    <el-form-item label="SKU 名称">
      <el-input type="text" placeholder="SKU 名称" ></el-input>
    </el-form-item>

    <el-form-item label="价格(元)">
      <el-input type="number" placeholder="SKU 价格" ></el-input>
    </el-form-item>

    <el-form-item label="重量(千克)">
      <el-input type="number" placeholder="SKU 重量" ></el-input>
    </el-form-item>

    <el-form-item label="规格描述">
      <el-input type="textarea" placeholder="SKU 规格描述" rows="4" ></el-input>
    </el-form-item>

    <el-form-item label="平台属性">
      <el-form inline label-width="100px">
        <el-form-item  style="margin: 5px 0" :label="attr.attrName"
                       v-for="attr in attrList" :key="attr.id" >
          <el-select placeholder="请输入" >
            <el-option :value="attrVal.valueName"
              v-for="attrVal in attr.attrValueList" :key="attrVal.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="销售属性">
      <el-form inline label-width="100px">
        <el-form-item  style="margin: 5px 0" :label="attr.saleAttrName"
                       v-for="attr in spuSaleAttrList" :key="attr.id" >
          <el-select placeholder="请输入" >
            <el-option :value="attrVal.saleAttrValueName"
                       v-for="attrVal in attr.spuSaleAttrValueList" :key="attrVal.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="图片列表">
      <el-table border :data="spuImageList">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column label="图片">
          <template slot-scope="{row}">
            <img :src="row.imgUrl" alt="" style="width:100px;height:100px;">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row, $index}">
            <el-button type="primary" size="small">设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-form-item>
      <el-button type="primary">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
	export default {
	  name: 'addSku',
    props:["showSkuAdd"],
	  data () {
      return {
        spuName:'',
        spuSaleAttrList:[],
        spuImageList:[],
        attrList:[]
      }
	  },
	  methods: {
	    //初始化当前界面的一些基础数据
      async initData({category1Id,category2Id,category3Id,id,spuName}){
        this.spuName=spuName;
        //row:spu对象
        //对应spu的销售属性列表
        const p1 = this.$API.product.spu.getSpuSaleAttrList(id)
        //对应spu的图片列表
        const p2 = this.$API.product.spu.getSpuImageList(id)
        //获取所有的平台属性
        const p3 = this.$API.product.attr.getAttrList({category1Id,category2Id,category3Id})

        const [
          {data:spuSaleAttrList},
          {data:spuImageList},
          {data:attrList}] = await Promise.all([p1,p2,p3]);

        this.spuSaleAttrList=spuSaleAttrList;
        this.spuImageList=spuImageList;
        this.attrList=attrList;
      },
      //取消按钮的逻辑
      cancel(){
        //控制列表界面是否顯示
        this.$emit("update:showSkuAdd",false)
      },
	  }
	}
</script>
